// 1. 导入核心依赖（Vue3 及 VuePress 客户端必备）
import { defineClientConfig, provide } from "@vuepress/client";
import axios from "axios";
import { createToast } from "vue-toastification";
import "vue-toastification/dist/index.css";
// 导入自定义组件（Vue3 单文件组件）
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
import DocManager from "./components/DocManager.vue";
import MDEditor from "./components/MDEditor.vue";

// 2. 初始化全局提示工具（Vue3 兼容的单例模式）
const toast = createToast({
  position: "top-right",
  timeout: 3000,
  closeOnClick: true
});

// 3. 配置 axios（Vue3 项目中标准的 HTTP 工具配置）
axios.defaults.baseURL = "http://localhost:8081/api";
axios.defaults.timeout = 10000;

// 请求拦截器（Vue3 中保持拦截器逻辑，仅调整错误提示方式）
axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("blog_token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    toast.error("请求异常：" + error.message);
    return Promise.reject(error);
  }
);

// 响应拦截器（统一错误处理，适配 Vue3 路由跳转）
axios.interceptors.response.use(
  (response) => response.data,
  (error) => {
    const errorMsg = error.response?.data?.msg || "服务器异常，请稍后重试";
    toast.error(errorMsg);

    // Token 过期处理（Vue3 中使用 window.location 跳转更直接）
    if (error.response?.status === 401) {
      localStorage.removeItem("blog_token");
      localStorage.removeItem("blog_username");
      window.location.href = "/login/";
    }

    return Promise.reject(error);
  }
);

// 4. 定义客户端配置（完全遵循 Vue3 组合式 API 规范）
export default defineClientConfig({
  // 全局注册组件（Vue3 中组件注册方式不变，支持在模板中直接使用）
  components: { Login, Register, DocManager, MDEditor },

  // 客户端初始化逻辑（Vue3 风格的 setup 函数，使用 provide 注入全局服务）
  setup({ app, router }) {
    // 4.1 提供全局服务（Vue3 推荐的 provide/inject 模式，替代部分 globalProperties）
    provide("axios", axios);          // 提供 HTTP 工具
    provide("toast", toast);          // 提供提示工具
    
    // 4.2 全局属性注入（保留必要的全局属性，方便模板中直接访问）
    app.config.globalProperties.$axios = axios;
    app.config.globalProperties.$toast = toast;
    app.config.globalProperties.$localePath = router.currentRoute.value.path.startsWith("/en/") ? "/en/" : "/";

    // 4.3 路由守卫（Vue3 中路由守卫逻辑不变，使用组合式 API 风格编写）
    router.beforeEach((to, from, next) => {
      const hasToken = !!localStorage.getItem("blog_token");
      const isLoginPage = to.path.includes("/login/");
      const isRegisterPage = to.path.includes("/register/");
      const isAdminPage = to.path.includes("/admin/");

      // 已登录状态处理导航栏（Vue3 中 DOM 操作需确保在客户端执行）
      if (hasToken && typeof window !== "undefined") {
        const loginLink = document.getElementById("login-link");
        const registerLink = document.getElementById("register-link");

        if (loginLink) {
          const username = localStorage.getItem("blog_username") || "用户";
          loginLink.textContent = `欢迎，${username}`;
          loginLink.href = "#";
          loginLink.onclick = (e) => {
            e.preventDefault();
            if (confirm("确定要退出登录吗？")) {
              localStorage.removeItem("blog_token");
              localStorage.removeItem("blog_username");
              window.location.reload();
            }
          };
        }

        if (registerLink) registerLink.style.display = "none";
      }

      // 权限控制逻辑（Vue3 中路由跳转逻辑不变）
      if (isAdminPage && !hasToken && !isLoginPage) {
        toast.warning("请先登录后访问管理中心");
        next("/login/");
        return;
      }

      if (hasToken && (isLoginPage || isRegisterPage)) {
        next("/");
        return;
      }

      next();
    });
  },
});
